<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../../css/reset.css" />
		<link rel="stylesheet" href="../../css/layer_list.css" />
		<style>
		</style>
	</head>
	<body class="p15">
		<div class="container">
			<div class="layui-card-header lh30" style="height: 30px;">
				<label class="layui-form-label">机房位置：</label>
				<span>北京市大兴区永昌中路3号</span>
			</div>
			<div class="layui-row count-show p10">
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label">机房利用率：</label>
					<span style="color: #ff9900;">90%</span>
				</div>
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label">机柜数量：</label>
					<span>21个</span>
				</div>
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label" style="width: 130px;">可安装设备的：</label>
					<span>2个</span>
				</div>
				<div class="layui-col-sm3 lh30">
					<label class="layui-form-label">剩余空间：</label>
					<span>48U</span>
				</div>
			</div>
			<table id="list" lay-filter="list"></table>
		</div>
		<script src="../../js/jquery-3.3.1.min.js"></script>
		<script src="../../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<script src="../../js/common.js"></script>
		<script>
			var data = [{
					id: 1,
					name: 'XFJ_C3560_JKHW_1',
					brand:'Cisco',
					model:'WS-C3560',
					ip_address: '10.106.1.1',
					time:'2016.1.1',
					state:0,
					state_m:'正常'
				}
			];
			layui.use(['table'],function(){
				var table = layui.table;
				//第一个实例
				  table.render({
					elem: '#list'
					,height: '300'
					,url: '' //数据接口
					,page: true //开启分页
					,cols: [[ //表头
					  	{
					  		field: 'xh',
					  		title: '序号',
					  		width: 80,
					  		align: 'center',
					  		templet: function(d) {
					  			return d.LAY_INDEX;
					  		}
					  	}, {
					  		field: 'name',
					  		title: '设备名称',
					  		align: 'center'
					  	}, {
					  		field: 'brand',
					  		title: '品牌',
					  		align: 'center'
					  	}, {
					  		field: 'model',
					  		title: '型号',
					  		align: 'center'
					  	}, {
					  		field: 'ip_address',
					  		title: 'IP地址',
					  		align: 'center'
					  	}, {
					  		field: 'time',
					  		title: '入库时间',
					  		align: 'center'
					  	}
						,{field: 'state', title: '资产状态', align:'center'
						,templet:function(d){
							var arr = ['在用','待废','已过保'];
							var colors = ['layui-btn layui-btn-xs','layui-btn layui-btn-warm layui-btn-xs','layui-btn layui-btn-primary layui-btn-xs']
							return `<span class="${colors[d.state]}">${arr[d.state]}</span>`
						}}
						,{field: 'state_m', title: '设备状态',align:'center'}
						
					]]
					,data:data
				  });
				  table.on('row(list)',function(obj){
				  		openLayer_parent('project/project_detail.html','详情','800px','400px');
				  })
			})
			$(function(){
				$("#addBtn").click(function(){
					top.tabAdd('机房新增','jifang_add','pages/jifang/jifang_add.html',true,true);
					
				})
			})
		</script>
	</body>
</html>
